<template>
  <!--  <CssMagnifier/>-->
  <!--  <Task1/>-->
  <!--  <Task2/>-->
  <!--  <Task3/>-->
  <el-button
      style="margin:15px"
      @click="handler(item)"
      v-for="item of 4" :key="item">
    简单表格{{ item }}
  </el-button>
  <component :is="current"></component>
</template>

<script>

import CssMagnifier from './components/放大镜'
import Task1 from './components/Task1'
import Task2 from './components/Task2'
import Task3 from './components/Task3'
import Task4 from './components/Task4'

export default {
  name: 'App',
  components: {
    Task1,
    Task2,
    Task3,
    Task4,
    CssMagnifier,
  },
  setup() {
    const current = ref('Task4')
    const handler = (item) => {
      current.value = `Task${item}`
    }
    return {
      current,
      handler,
    }
  }
}
</script>
<style>

</style>
